<template>
  <div>
    <div class="filter-container border-bottom">
      <div class="filter-item" v-for="(item,index) in filterTypeList" @click="showFitlerDetail(item,index)">
        <span class="filter-name" :class="item.activeName?'filter-active':''">{{(item.activeName||item.name)}}</span>
        <i class="arrow-icon" :class="item.arrowTop?'top':'down'"></i>
      </div>
    </div>
    <div class="filter-content-mask" v-show="filterMaskShow" @click="closeFilterModal">
      <div class="filter-content">
        <div class="filter-btn" :class="filterTypeList[curFilterIndex].itemKey==item.itemKey?'active':''"
             v-for="item in filterContentList" @click="filterSelected(item)">
          {{item.itemValue}}
        </div>
        <div class="loading-container" v-show="!filterContentList.length && loadding">
          <loading></loading>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Loading from '@/components/loading/loading'
  //判断当前选中的筛选项
  const isActiveFilter = (activeConditions,conditionLists)=>{
    if(!activeConditions.length || !conditionLists.length) return false
    for(let i =0;i<activeConditions.length;i++){
      if(conditionLists.some((o)=>{
        return o.itemKey == activeConditions[i].itemKey
      })){
        return activeConditions[i]
      }
    }
  };
  export default {
    name:'topFilter',
    props:{
      //当前选中的选项
      activeConditions:{
        type:Array,
        default:[]
      },
      //所有筛选项
      filterConditions:{
        type:Object,
        default:{}
      },
      //列表参数数组
      argList:{
        type:Array,
        default:[]
      }
    },
    components:{
      Loading
    },
    data(){
      return{
        filterMaskShow: false,
        loadding: true,//加载过滤选项
        filterContentList: [],//筛选项内容
        curFilterIndex: -1,//当前点击的筛选项下标
      }
    },
    computed:{
      filterTypeList(){
        if(this.isEmpty(this.filterConditions)) return [];
        let arr = [];
        this._.forEach(this.filterConditions,(val,key)=>{
          arr.push({
            //默认的value
            name:this.filterConditions[key].itemTitle,
            //筛选项的value
            activeName:isActiveFilter(this.activeConditions,val.itemList)?isActiveFilter(this.activeConditions,val.itemList).itemValue:'',
            //箭头
            arrowTop: false,
            type: key,
            //筛选项的key
            itemKey: isActiveFilter(this.activeConditions,val.itemList)?isActiveFilter(this.activeConditions,val.itemList).itemKey:'-'
          })
        });
        return arr
      }
    },
    methods:{
      closeFilterModal(){
        this.filterMaskShow = false;
        this.filterTypeList.forEach((o) => {
          o.arrowTop = false
        })
      },
      showFitlerDetail(item, index){
        this.curFilterIndex = index;
        //判断当前筛选内容中是否包含了全部按钮
         this.filterContentList = this.filterConditions[item.type].itemList || [];
        //控制箭头方向
        let isTop = item.arrowTop;
        this.filterTypeList.forEach((o) => {
          o.arrowTop = false
        });
        item.arrowTop = !isTop;
        this.filterMaskShow = item.arrowTop
      },
      filterSelected(item){
        let activeConditions = JSON.parse(JSON.stringify(this.activeConditions));
        const index = this._.findIndex(activeConditions,(o)=>{
          return o.itemKey===this.filterTypeList[this.curFilterIndex].itemKey
        });
        //判断选中项是筛选项还是全部or不限制
        if(item.itemKey!='-'){
          if(index>-1){
            activeConditions.splice(index,1,item)
          }else {
            activeConditions.push(item)
          }
        }else {
          activeConditions.splice(index,1)
        }
        //更新当前选中项
        this.$emit('updateFilter',activeConditions)
      }
    },
    watch:{
      //父组件更新当前选中项的时候请求列表
      filterTypeList(val){
        if(this.filterMaskShow) return;
        let conditions={};
        for(let i=0;i<this.argList.length;i++){
          conditions[this.argList[i]]=this.filterTypeList[i].itemKey
        }
        this.$emit('filterList',conditions)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import "~style/mixins.styl"
  .filter-container
    width 100%
    display flex
    height .9rem
    line-height .9rem
    .filter-item
      display flex
      align-items center
      font-size .3rem
      width 100%
      justify-content center
      .filter-name
        ellipsis()
        color $darkTextColor
        word-break keep-all
        &.filter-active
          color $titleColor
      .arrow-icon
        width .48rem
        height .48rem
        background url("/static/img/ic_shouqi@2x.png")
        background-size 100% 100%
        transition: All 0.3s ease-in-out
        &.down
          transform rotate(-180deg)
        &.top
          transform rotate(0deg)

  .filter-content-mask
    position fixed
    top .9rem
    left 0
    bottom 0
    right 0
    background-color rgba(0, 0, 0 .4)
    z-index 1
    .filter-content
      position relative
      background-color white
      display flex
      flex-flow row wrap
      justify-content flex-start
      text-align center
      min-height 2rem
      width 100%
      box-sizing border-box
      padding .4rem
      .loading-container
        position: absolute
        width 90%
        top: 50%
        transform: translateY(-50%)
      .filter-btn
        background-color #f6f6f6
        color #575758
        width 30%
        height .6rem
        border-radius 10rem
        line-height .6rem
        text-align center
        font-size .26rem
        margin .15rem 1.62%
        padding 0 .2rem
        box-sizing border-box
        ellipsis()
        &.active
          background-color rgba(255, 99, 50 .1)
          border .02rem solid $titleColor
          color $titleColor

</style>
